<template>
  <div>
    <a-row type="flex">
      <a-col  :md="18" :sm="24">
        <detail-list :col="2">
          <detail-list-item term="学号">{{ studentData.xh }}&nbsp;</detail-list-item>
          <detail-list-item term="姓名">{{ studentData.xm }}&nbsp;</detail-list-item>
          <detail-list-item term="性别">{{ studentData.xbmc }}&nbsp;</detail-list-item>
          <detail-list-item term="年级">{{ studentData.xjxx.sznj }}&nbsp;</detail-list-item>
          <detail-list-item term="入学时间">{{ studentData.xjxx.rxny.format('YYYY-MM-DD') }}&nbsp;</detail-list-item> 
          <detail-list-item term="院系">{{ studentData.xjxx && studentData.xjxx.ssyxmc }}&nbsp;</detail-list-item>
          <detail-list-item term="专业">{{ studentData.xjxx && studentData.xjxx.sszymc }}&nbsp;</detail-list-item>
          <!-- <detail-list-item term="学科专业码">{{ studentData.xjxx && studentData.xjxx.sszym }}&nbsp;</detail-list-item> -->
          <detail-list-item term="证件类型">{{ studentData.sfzjlxmc }}&nbsp;</detail-list-item>
          <detail-list-item term="身份证号">{{ zjhm }}&nbsp;
            <a-button v-if="isShow[0].one" type="primary" size="small" @click="seeNumber(studentData.zjhm,1)">
              查看
            </a-button>
            <a-button v-if="!isShow[0].one" type="primary" size="small" @click="hideNumberZjhm(studentData.zjhm)">
              隐藏
            </a-button>
          </detail-list-item>
          <detail-list-item term="联系电话">{{ lxdh }}&nbsp;
            <a-button v-if="isShow[1].two" type="primary" size="small" @click="seeNumber(studentData.lxdh,2)">
              查看
            </a-button>
            <a-button v-if="!isShow[1].two" type="primary" size="small" @click="hideNumberLxdh(studentData.lxdh)">
              隐藏
            </a-button>
          </detail-list-item>
          <detail-list-item term="出生日期">{{ studentData.csrq && studentData.csrq.format('YYYY-MM-DD') }}&nbsp;</detail-list-item>
          <detail-list-item term="政治面貌">{{ studentData.zzmmmc }}&nbsp;</detail-list-item>
          <detail-list-item term="国内联系人">{{ studentData.gnlxr }}&nbsp;</detail-list-item>
          <detail-list-item term="联系人电话">{{ gnlxrdh }}&nbsp;
            <a-button v-if="isShow[2].three" type="primary" size="small" @click="seeNumber(studentData.gnlxrdh,3)">
              查看
            </a-button>
            <a-button v-if="!isShow[2].three" type="primary" size="small" @click="hideNumberPhone(studentData.gnlxrdh)">
              隐藏
            </a-button>
          </detail-list-item>
          <detail-list-item term="电子邮箱">{{ studentData.dzxx }}&nbsp;</detail-list-item>
          <detail-list-item term="留学国别">{{ studentData.xjxx.lxgbmc }}&nbsp;</detail-list-item>
          <detail-list-item term="国外留学高校及院系">{{ studentData.xjxx.lxgxyx }}&nbsp;</detail-list-item>
          <detail-list-item term="学习期限">{{ studentData.xjxx.lxxxqx }}&nbsp;</detail-list-item>
          <detail-list-item term="拟毕业时间">{{ studentData.xjxx.nbysj && studentData.xjxx.nbysj.format('YYYY-MM-DD') }}&nbsp;</detail-list-item>
          <detail-list-item term="校内住宿地址">{{ studentData.xjxx.xnzsdz }}&nbsp;</detail-list-item>
          <detail-list-item term="海外住址">{{ studentData.xjxx.hwzz }}&nbsp;</detail-list-item>

        </detail-list>
      </a-col>
      <a-col :span="4">
        <img style="width:100%" :src="studentData.zpdz ? `${IMG_URL}${studentData.zpdz}` : require('@/assets/avator.jpg')" alt="">
      </a-col>
    </a-row>
  </div>
</template>

<script>
import DetailList from '~/tool/DetailList'
const DetailListItem = DetailList.Item

export default {
  // props: ['studentData']
  props: {
    studentData: {
      type: Object,
      default: {
        xslbm: '',
        xjxx: {}
      }
    }
  },
  components: {DetailList, DetailListItem},
  data () {
    return {
      zjhm: '',
      lxdh: '',
      gnlxrdh: '',
      isShow: [{one:true},{two:true},{three:true}],
      IMG_URL: process.env.IMG_URL
    }
  },
 
  created(){
    this.$nextTick(()=> {
      console.log(this.studentData)
      this.hideNumberZjhm(this.studentData.zjhm)
      this.hideNumberLxdh(this.studentData.lxdh)
      this.hideNumberPhone(this.studentData.gnlxrdh)
    })
  },
  methods:{
    seeNumber(num,n){
      console.log(num)
        if(n == 1){
          this.zjhm = num
          this.isShow[0].one = false
        }else if(n == 2){
          this.lxdh = num
          this.isShow[1].two = false
        }else{
          this.gnlxrdh = num
          this.isShow[2].three = false
        }
      },
      hideNumberZjhm(num){
      console.log(num)
        let arr = []
          arr = num.split('').map((item,index) => {
            if( index > 5 ){
              return item.replace(item,'*')
            }
            return item
          })
          this.zjhm = arr.join('')
          this.isShow[0].one = true
      },
      hideNumberLxdh(num){
        console.log(num)
        let arr = []
          arr = num.split('').map((item,index) => {
            if(index > 2){
              return item.replace(item,'*')
            }
            return item
          })
          this.lxdh = arr.join('')
          this.isShow[1].two = true
      },
      hideNumberPhone(num){
      console.log(num)

        let arr = []
          arr = num.split('').map((item,index) => {
            if(index > 2){
              return item.replace(item,'*')
            }
            return item
          })
          this.gnlxrdh = arr.join('')
          this.isShow[2].three = true
      },
  }
}
</script>

<style>

</style>
